<div *ngIf="!loading">
  <h1 class="page-title">
    <span class="text-truncate">
      <span *ngIf="isDeployed(stream)">Update</span>
      <span *ngIf="!isDeployed(stream)">Deploy</span>
      stream <strong>{{ stream?.name }}</strong>
    </span>
  </h1>
  <p style="margin-top: 0.6rem; margin-bottom: 0.6rem">
    Please specify any optional deployment properties. You can either use the builder.<br />
    Alternatively, you can point to an external properties file containing the deployment properties. For more
    information please see the Technical Documentation.
  </p>

  <clr-tabs *ngIf="!loading && stream">
    <clr-tab>
      <button clrTabLink id="link1">Builder</button>
      <clr-tab-content id="content1" *clrIfActive="true">
        <app-stream-deploy-builder
          [properties]="properties"
          [id]="stream.name"
          [isDeployed]="isDeployed(stream)"
          (exportProperties)="runExport($event)"
          (update)="update($event)"
          (deploy)="runDeploy($event)"
          (copyProperties)="runCopy($event)"
        >
        </app-stream-deploy-builder>
      </clr-tab-content>
    </clr-tab>
    <clr-tab>
      <button clrTabLink>Freetext</button>
      <clr-tab-content *clrIfActive>
        <app-stream-deploy-free-text
          [properties]="properties"
          [id]="stream.name"
          [isDeployed]="isDeployed(stream)"
          (exportProperties)="runExport($event)"
          (update)="update($event)"
          (deploy)="runDeploy($event)"
          (copyProperties)="runCopy($event)"
        >
        </app-stream-deploy-free-text>
      </clr-tab-content>
    </clr-tab>
  </clr-tabs>

  <clr-modal [(clrModalOpen)]="isDeploying" *ngIf="stream" [clrModalClosable]="false">
    <h3 class="modal-title" *ngIf="isDeployed(stream)">Update stream</h3>
    <h3 class="modal-title" *ngIf="!isDeployed(stream)">Deploy stream</h3>
    <div class="modal-body" *ngIf="isDeploying">
      <clr-spinner clrInline clrSmall></clr-spinner>&nbsp;
      <span *ngIf="isDeployed(stream)">Updating stream ...</span>
      <span *ngIf="!isDeployed(stream)">Deploying stream(s) ...</span>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" [disabled]="true">Cancel</button>
    </div>
  </clr-modal>
</div>

<div *ngIf="loading">
  <clr-spinner clrInline clrSmall></clr-spinner>
  Loading data ...
</div>
